<template>
  <div class="gradient-background" :style="backgroundStyle"></div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  config: {
    type: Object,
    default: () => ({
      colors: ['#667eea', '#764ba2', '#f093fb'],
      direction: 'diagonal',
      speed: 15
    })
  }
})

const backgroundStyle = computed(() => {
  const { colors, direction, speed } = props.config
  
  const directionMap = {
    horizontal: '90deg',
    vertical: '180deg',
    diagonal: '135deg'
  }
  
  const deg = directionMap[direction] || '135deg'
  const gradient = `linear-gradient(${deg}, ${colors.join(', ')})`
  
  return {
    background: gradient,
    animation: `gradient-shift ${speed}s ease infinite`,
    backgroundSize: '200% 200%'
  }
})
</script>

<style scoped>
.gradient-background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>

